/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 18px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 25px;
    height: 1px;
    background-color: #6ac5ff;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }


/*
   * Elastic
   */
.hamburger--elastic .hamburger-inner {
  top: 2px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  .hamburger--elastic .hamburger-inner::before {
    top: 10px;
    transition: opacity 0.125s 0.275s ease; 
	opacity: 0; }
  .hamburger--elastic .hamburger-inner::after {
    top: 10px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.hamburger--elastic.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(135deg);
  transition-delay: 0.075s; }
  .hamburger--elastic.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0; }
  .hamburger--elastic.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-270deg);
    transition-delay: 0.075s; }


/*
   * spin
   */

.hamburger--spin .hamburger-inner {
	transition-timing-function: cubic-bezier(.55, .055, .675, .19);
	transition-duration: .22s
}
.hamburger--spin .hamburger-inner:before {
	transition: top .1s ease-in .25s, opacity .1s ease-in
}
.hamburger--spin .hamburger-inner:after {
	transition: bottom .1s ease-in .25s, transform .22s cubic-bezier(.55, .055, .675, .19)margin-top:-8px;
}
.hamburger--spin.is-active .hamburger-inner {
	transition-delay: .12s;
	transition-timing-function: cubic-bezier(.215, .61, .355, 1);
	transform: rotate(225deg)
}
.hamburger--spin.is-active .hamburger-inner:before {
	top: 0;
	transition: top .1s ease-out, opacity .1s ease-out .12s;
	opacity: 0
}
.hamburger--spin.is-active .hamburger-inner:after {
	bottom: 0;
	transition: bottom .1s ease-out, transform .22s cubic-bezier(.215, .61, .355, 1) .12s;
	transform: rotate(-90deg)
}
.hamburger--spin-r .hamburger-inner {
	transition-timing-function: cubic-bezier(.55, .055, .675, .19);
	transition-duration: .22s
}
.hamburger--spin-r .hamburger-inner:before {
	transition: top .1s ease-in .25s, opacity .1s ease-in
}
.hamburger--spin-r .hamburger-inner:after {
	transition: bottom .1s ease-in .25s, transform .22s cubic-bezier(.55, .055, .675, .19);margin-top:-8px;
}
.hamburger--spin-r.is-active .hamburger-inner {
	transition-delay: .12s;
	transition-timing-function: cubic-bezier(.215, .61, .355, 1);
	transform: rotate(-225deg)
}
.hamburger--spin-r.is-active .hamburger-inner:before {
	top: 0;
	transition: top .1s ease-out, opacity .1s ease-out .12s;
	opacity: 0
}
.hamburger--spin-r.is-active .hamburger-inner:after {
	bottom: 0;
	transition: bottom .1s ease-out, transform .22s cubic-bezier(.215, .61, .355, 1) .12s;
	transform: rotate(90deg)
}
.hamburger--spring .hamburger-inner {
	top: 2px;
	transition: background-color 0s linear .13s
}
.hamburger--spring .hamburger-inner:before {
	top: 10px;margin-top:-4px;
	transition: top .1s cubic-bezier(.33333, .66667, .66667, 1) .2s, transform .13s cubic-bezier(.55, .055, .675, .19)
}
.hamburger--spring .hamburger-inner:after {
	top: 20px;
	transition: top .2s cubic-bezier(.33333, .66667, .66667, 1) .2s, transform .13s cubic-bezier(.55, .055, .675, .19)
}
.hamburger--spring.is-active .hamburger-inner {
	transition-delay: .22s;
	background-color: transparent
}
.hamburger--spring.is-active .hamburger-inner:before {
	top: 3px; 
	transition: top .1s cubic-bezier(.33333, 0, .66667, .33333) .15s, transform .13s cubic-bezier(.215, .61, .355, 1) .22s;
	transform: translate3d(0, 10px, 0) rotate(45deg)
}
.hamburger--spring.is-active .hamburger-inner:after {
	top: 3px;margin-top:-4px;
	transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), transform .13s cubic-bezier(.215, .61, .355, 1) .22s;
	transform: translate3d(0, 10px, 0) rotate(-45deg)
}
.hamburger--spring-r .hamburger-inner {
	top: auto;
	bottom: 0;
	transition-delay: 0s;
	transition-timing-function: cubic-bezier(.55, .055, .675, .19);
	transition-duration: .13s
}
.hamburger--spring-r .hamburger-inner:after {
	top: -20px;
	transition: top .2s cubic-bezier(.33333, .66667, .66667, 1) .2s, opacity 0s linear
}
.hamburger--spring-r .hamburger-inner:before {margin-top:8px;
	transition: top .1s cubic-bezier(.33333, .66667, .66667, 1) .2s, transform .13s cubic-bezier(.55, .055, .675, .19)
}
.hamburger--spring-r.is-active .hamburger-inner {
	transition-delay: .22s;
	transition-timing-function: cubic-bezier(.215, .61, .355, 1);
	transform: translate3d(0, -10px, 0) rotate(-45deg)
}
.hamburger--spring-r.is-active .hamburger-inner:after {
	top: 0;
	transition: top .2s cubic-bezier(.33333, 0, .66667, .33333), opacity 0s linear .22s;
	opacity: 0
}
.hamburger--spring-r.is-active .hamburger-inner:before {
	top: 0;
	transition: top .1s cubic-bezier(.33333, 0, .66667, .33333) .15s, transform .13s cubic-bezier(.215, .61, .355, 1) .22s;
	transform: rotate(90deg)
}